<template>
  <div class="personal-main">
    <el-form label-width="120px" :inline="true" class="demo-form-inline">
      <el-form-item
        label="隐患类型"
        style="margin-left: 50px; margin-top: 30px"
      >
        <el-select
          style="width: 220px; margin-right: 255px"
          v-model="searchObj.hiddenType"
          clearable
        >
          <el-option
            v-for="item in handleTypeList"
            :key="item.typeId"
            :label="item.handleType"
            :value="item.typeId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="充电站点"
        style="margin-left: 50px; margin-top: 30px"
      >
        <el-select
          v-model="searchObj.addressSite"
          placeholder="请选择"
          style="width: 220px; margin-right: 250px"
          clearable
        >
          <el-option
            v-for="item in optionList"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="充电桩型号" style="margin-left: 50px">
        <el-select
          v-model="searchObj.chargingpileType"
          placeholder="请选择"
          style="width: 220px; margin-right: 255px"
          clearable
          @change="getSerialNumber()"
        >
          <el-option
            v-for="item in chargingPileOBJ"
            :key="item.chargingPileSpec"
            :label="item.chargingPileSpec"
            :value="item.chargingPileSpec"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="充电桩编号" style="margin-left: 50px">
        <el-select
          v-model="searchObj.number"
          placeholder="请选择"
          style="width: 220px; margin-right: 250px"
          clearable
        >
          <el-option
            v-for="item in chargingPileOBJ"
            :key="item.serialNumber"
            :label="item.serialNumber"
            :value="item.serialNumber"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="时间" style="margin-left: 50px">
        <el-date-picker
          clearable
          size="small"
          style="width: 220px; margin-right: 255px"
          v-model="searchObj.regTimes"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="发生时间"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="详细地点" style="margin-left: 50px">
        <el-select
          v-model="searchObj.address"
          placeholder="请选择"
          style="width: 220px; margin-right: 250px"
          clearable
        >
          <el-option value="广州市天河区体育西路1140号1">
            广州市天河区体育西路1140号1
          </el-option>
          <el-option value="广州市天河区体育西路1141号2">
            广州市天河区体育西路1140号1
          </el-option>
          <el-option value="广州市天河区体育西路1142号3">
            广州市天河区体育西路1140号1
          </el-option>
          <el-option value="广州市天河区体育西路1143号4">
            广州市天河区体育西路1140号1
          </el-option>
          <el-option value="广州市天河区体育西路1144号5">
            广州市天河区体育西路1140号1
          </el-option>
          <el-option value="广州市天河区体育西路1145号6">
            广州市天河区体育西路1140号1
          </el-option>
          <el-option value="广州市天河区体育西路1146号7">
            广州市天河区体育西路1140号1
          </el-option>
          <el-option value="广州市天河区体育西路1147号8">
            广州市天河区体育西路1140号1
          </el-option>
          <el-option value="广州市天河区体育西路1148号9">
            广州市天河区体育西路1140号1
          </el-option>
          <el-option value="广州市天河区体育西路1149号10">
            广州市天河区体育西路1140号1
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="联络电话" style="margin-left: 50px">
        <el-input
          v-model="searchObj.contactsPhone"
          :span="5"
          style="width: 220px; margin-right: 255px"
        >
          <el-input />
        </el-input>
      </el-form-item>
      <el-form-item label="优先级" style="margin-left: 50px">
        <el-select
          style="width: 220px; margin-right: 250px"
          v-model="searchObj.statusName"
          clearable
        >
          <el-option
            v-for="item in getRankList"
            :key="item.statusName"
            :label="item.statusName"
            :value="item.statusName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" style="margin-left: 50px">
        <el-select
          style="width: 220px; margin-right: 660px"
          v-model="searchObj.handleName"
          clearable
        >
          <el-option value="0">登记</el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="隐患内容"
        style="margin-left: 50px; margin-bottom: -1px; margin-right: 80px"
      >
        <textarea
          style="width: 880px; height: 50px"
          v-model="searchObj.content"
        ></textarea>
      </el-form-item>

      <el-form-item label="处理人" style="margin-left: 50px">
        <el-select
          v-model="searchObj.personName"
          placeholder="请选择"
          style="width: 220px; margin-right: 260px"
          clearable
        >
          <el-option
            v-for="item in solvePersonList"
            :key="item.personName"
            :label="item.personName"
            :value="item.personName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="预计完成时间" style="margin-left: 50px">
        <el-date-picker
          v-model="searchObj.estimates"
          clearable
          size="small"
          style="width: 220px; margin-right: 240px"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
      </el-form-item>

      <el-form-item
        label="任务内容"
        style="margin-left: 50px; margin-bottom: -1px"
      >
        <textarea
          style="width: 880px; height: 50px"
          v-model="searchObj.assContent"
        ></textarea>
      </el-form-item>
    </el-form>

    <el-form label-width="120px">
      <el-form-item label="上传文件">
        <el-upload
          :on-success="onUploadSuccessHouse"
          :on-remove="onUploadRemove"
          :multiple="false"
          :action="uploadUrl"
          :data="{ module: 'house' }"
          list-type="picture-card"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
    </el-form>

    <el-form label-width="120px" :inline="true" class="demo-form-inline">
      <el-form-item style="margin-left: 200px; margin-right: 240px">
        <el-button type="fanhui" @click="manage">返回</el-button>
      </el-form-item>
      <el-form-item style="margin-right: 240px">
        <el-button
          type="primary"
          :disabled="submitBtnDisabled"
          @click="dealSave"
        >
          保存&派发
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :disabled="submitBtnDisabled"
          @click="dealSave"
        >
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import listApi from '@/api/charging-pile/hidden_manage'

export default {
  data() {
    let BASE_API = process.env.VUE_APP_BASE_API
    return {
      optionList: [],
      submitBtnDisabled: false,
      save: {
        saveList: [],
      },
      handleTypeList: [],
      searchObj: {}, // 查询条件
      getRankList: [], //处理人
      chargingPileOBJ: [], //充电桩型号
      chargingpileList: [], //充电站点
      findAllHiddenList: [], //详细信息
      rankList: [], //状态
      solvePersonList: [], //处理人
      uploadUrl: BASE_API + ':8130/api/oss/file/upload', //文件上传地址
    }
  },
  created() {
    this.cpList()
    this.getSerialNumber()
  },
  methods: {
    cpList() {
      listApi.getHandleType().then((res) => {
        //隐患信息
        this.handleTypeList = res.data.typeList
      })
      listApi.solvePerson().then((res) => {
        //处理人信息
        this.solvePersonList = res.data.list
      })

      listApi.getRank().then((res) => {
        //隐患优先级
        this.getRankList = res.data.typeList
      })
      listApi.findChargingStations().then((res) => {
        //充电站点信息
        this.optionList = res.data.options
      })
      listApi.findCpHandleCode().then((res) => {
        //处理信息
        this.rankList = res.data.code
      })
      listApi.getChargingPile().then((res) => {
        //充电桩信息
        this.chargingPileOBJ = res.data.chargingPileList
      })

      listApi.findAllHidden().then((res) => {
        //充电桩信息
        this.findAllHiddenList = res.data.findAllHidden
      })
    },
    //返回主页面
    manage() {
      this.$router.push({ path: '/charging-pile/hidden_manage' })
    },

    getSerialNumber() {
      listApi
        .getChargingPileSerialNumber(this.searchObj.chargingpileType)
        .then((res) => {
          //充电桩型号
          this.serialNumberOnList = res.data.serialNumberList
        })
    },

    onUploadSuccessHouse(response, file) {
      this.onUploadSuccess(response, file, 'house')
    },

    onUploadSuccess(response, file, type) {
      // debugger
      if (response.code !== 0) {
        this.$message.error(response.message)
        return
      }
      // 填充上传文件列表
      this.searchObj.hiddenImg = response.data.url
    },

    onUploadRemove(file, fileList) {
      //console.log('fileList', fileList)
      //删除oss服务器上的内容
      this.$axios
        .$delete('/api/oss/file/remove?url=' + file.response.data.url)
        .then((response) => {
          // debugger
          console.log('远程删除')
          this.save.saveList = this.save.saveList.filter(function (item) {
            console.log('item', item)
            return item.imageUrl != file.response.data.url
          })
        })
    },

    dealSave() {
      this.submitBtnDisabled = true
      console.log(this.searchObj)
      listApi.dealSave(this.searchObj).then((res) => {
        if (res.message == 'ok') {
          this.$message.success('添加成功')
          this.cpList()
          this.$router.push({ path: '/charging-pile/hidden_manage' })
          //this.dealIsTrue = false
        } else {
          this.$message.error('添加失败')
        }
      })
    },
  },
}
</script>
